<template>
    <div class="demo">
        <div class="Movies">
            <div class="top">
                <div class="left">
                    <h1>Browse</h1>
                    <span>Movies in Chennai</span>
                </div>
                <div class="right">
                    <img src="@/assets/1.png" alt="">
                </div>
            </div>
            <div class="search">
                <el-input placeholder="Search movies or theatres" prefix-icon="el-icon-search"> </el-input>
            </div>
            <div class="title">
                <div class="left">
                    <h1>All Movie</h1>
                </div>
                <div class="right">
                    <span>Filters</span>
                </div>
            </div>
            <ul class="list">
                <li v-for="item in moviesList" :key="item.id">
                    <img :src="item.imgUrl" alt="">
                    <span>{{item.text}}</span><br>
                    <span class="time">{{item.time}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import {Movies_Data} from '@/mock/mockApi/movies.js'
    export default {
        data(){
            return{
                moviesList:[]
            }
        },
        mounted(){
            this.getMoviesData();
        },
        methods:{
            async getMoviesData(){
                const result = await Movies_Data({
                    method:'get',
                    url:'/home/movies'
                })
                console.log(result);
                this.moviesList = result.data.data;
                console.log(this.moviesList)
            }
        }
    }
</script>

<style lang="scss" scoped>
.demo{
    width:100%;
    height:100%;
    .Movies{
        width:83%;
        height:90%;
        padding:30px;
        .top{
            width:100%;
            height:50px;
            display:flex;
            align-items:center;
            justify-content: space-between;
            margin:30px 0;
            .left{
                width:133px;
                height:50px;
                display:flex;
                flex-direction: column;
                align-items:flex-start;
                justify-content: space-between;
                h1{
                    font-size:24px;
                    font-weight:600;
                    color: rgba(33, 34, 36, 1);
                    text-align: left;
                    line-height:30px;
                }
                span{
                    font-size: 13px;
                    font-weight: 500;
                    color: rgba(134, 142, 150, 1);
                    text-align: left;
                }
            }
            .right{
                img{
                    width:90px;
                    height:60px;
                }
            }
        }
        .search{
            width: 315px;
            height: 34px;
                /deep/.el-input__inner{
                    border-radius:20px;
                }
        }
        .title{
            width:100%;
            height:22px;
            display:flex;
            align-items:center;
            justify-content: space-between;
            margin:30px 0;
            .left{
                h1{
                    font-size:18px;
                    font-weight:700;
                    color: rgba(33, 34, 36, 1);
                }
            }
            .eight{
                span{
                    font-size:13px;
                    font-weight: 500;
                    color: rgba(33, 34, 36, 1);
                }
            }
        }
        .list{
            list-style:none;
            display:flex;
            flex-wrap: wrap;
            justify-content: space-between;
            li{
                width: 91px;
                height: 174px;
                img{
                    width:91px;
                    height:134px;
                    border-radius:5px;
                }
                span{
                    font-size:10px;
                    text-align:left;
                    font-weight: 500;
                    color: rgba(74, 78, 82, 1);
                    overflow:hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap; 
                    font-family:"Montserrat";
                }
                .time{
                    font-size: 10px;
                    font-weight: 300;
                    color: rgba(74, 78, 82, 1);
                }
            }
        }
    }
}
</style>